---
section: Grid
title: Grid Auto Rows
slug: /docs/grid-auto-rows/
---

# Grid Auto Rows

Utilities for controlling the size of implicitly-created grid rows.

<carbon-ad />

| React props           | CSS Properties            |
| --------------------- | ------------------------- |
| `gridAutoRows={size}` | `grid-auto-rows: {size};` |

## Usage

Use the `gridAutoRows={size}` utilities to control the size implicitly-created grid rows.

```jsx
<x.div display="grid" gridAutoFlow="rows" gridAutoRows="max-content">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>
```

## Responsive

To control the grid-auto-rows property at a specific breakpoint, use responsive object notation. For example, adding the property `gridAutoRows={{ md: "max-content" }}` to an element would apply the `gridAutoRows="max-content"` utility at medium screen sizes and above.

```jsx
<x.div display="grid" gridAutoRows={{ md: 'max-content' }}>
  {/* ... */}
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
